<template>
	<view class="">
		<view class="" :style="[scroll_style]">
			<view :style="[scroll_box]">
				<view class="zh-scrollList_scroll_item" :style="[scroll_item]" v-for="(item,index) in scroll_list"
					:key="index">
					<!-- #ifdef H5 || APP-PLUS -->
					<!-- H5和APP-PLUS平台存在的代码 -->

					<!-- #ifdef VUE2  -->
					<template v-if="$scopedSlots.scroll">
					<!-- #endif -->

					<!-- #ifdef VUE3  -->
					<template v-if="$slots.scroll">
					<!-- #endif -->
					<!-- #endif -->

					<!-- #ifndef H5 || APP-PLUS -->
					<!-- 除了H5和APP-PLUS平台，其它平台均存在的代码 -->
					<template v-if="$slots.scroll">
					<!-- #endif -->

						<slot name='scroll' :rows='item' :index='index'></slot>
					</template>

					<template v-else>
						<view class="zh-scrollList_scroll_cell">
							<view class="zh-scrollList_title">{{item[name]}}</view>
							<view class="zh-scrollList_time">{{item[time_name]}}</view>
						</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<!-- #ifdef VUE3 -->
<!-- vue3 -->
<script lang="ts" setup>
	/*
	 * @param {list,Array} 滚动数据
	 * @param {time,Number} 滚动间隔时间
	 * @param {min,Number} 最少几条开始滚动
	 * @param {height,Number} 滚动区域的高度(单位rpx)
	 * @param {name,String} 左边属性名
	 * @param {time_name,String} 右边属性名
	 */
	import { computed, nextTick, ref, onBeforeMount, defineProps, watch, getCurrentInstance } from 'vue'

	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
		time: {
			typeof: Number,
			default: () => 2000
		},
		min: {
			typeof: Number,
			default: () => 3,
		},
		height: {
			typeof: Number,
			default: () => 520,
		},
		name: {
			typeof: String,
			default: () => 'name',
		},
		time_name: {
			typeof: String,
			default: () => 'time',
		},
	})

	const scroll_list = ref([]) //滚动数组
	const timer = ref(null) //滚动时定时器
	const scroll_box = ref({}) //滚动动画样式
	const settime = ref(null) //延时获取高度的定时器
	const settimes = ref(null) //定时器
	const line_height = ref(0) //滚动的高度
	const scroll_item = ref({}) //每列滚动样式

	const instance = getCurrentInstance();
	const selectorQuery = uni.createSelectorQuery().in(instance.proxy);

	//获取高度
	const getMenuItemTop = () => {
		return new Promise(resolve => {
			selectorQuery.select('.zh-scrollList_scroll_item').boundingClientRect((res : any) => {
				// 如果节点尚未生成，res值为''，循环调用执行
				console.log(res, '==');
				if (!res || !res.height) {
					clearTimeout(settime.value)
					settime.value = setTimeout(() => {
						getMenuItemTop();
					}, 100);
				} else {
					scroll_item.value = {
						'overflow': 'hidden',
						'height': `${res.height}px`,
						'line-height': `${res.height}px`
					}
					line_height.value = res.height
					scroll()
				}
				resolve(res)
			}).exec()
		})
	}

	//滚动事件
	const scroll = () => {
		//低于3条不滚动
		if (scroll_list.value.length < props.min) {
			return
		}
		clearInterval(timer.value);
		timer.value = setInterval(() => {
			clearTimeout(settimes.value)
			scroll_list.value.push(scroll_list.value[0])
			settimes.value = setTimeout(() => {
				scroll_list.value.shift()
				scroll_box.value = {
					'margin-top': 0,
					'transition': ''
				}
			}, 500)

			scroll_box.value = {
				'margin-top': `-${line_height.value}px`,
				'transition': 'all 0.5s'
			}
		}, props.time)
	}


	//计算属性
	const scroll_style = computed(() => {
		return {
			'overflow': 'hidden',
			'height': `${props.height}rpx`,
		}
	})

	// 监听
	watch(() => props.list, (news, old) => {
		scroll_list.value = JSON.parse(JSON.stringify(news))
		nextTick(() => {
			getMenuItemTop()
		})
	}, {
		deep: true,
		immediate: true
	})

	//销毁后
	onBeforeMount(() => {
		clearInterval(timer.value)
	})
</script>
<!-- #endif -->


<!-- #ifdef VUE2 -->
<!-- vue2 -->
<script>
	/*
	 * @param {list,Array} 滚动数据
	 * @param {time,Number} 滚动间隔时间(单位ms)
	 * @param {min,Number} 最少几条开始滚动
	 * @param {height,Number} 滚动区域的高度(单位rpx)
	 * @param {name,String} 左边属性名
	 * @param {time_name,String} 右边属性名
	 */
	export default {
		name: "scrollList",
		props: {
			list: {
				type: Array,
				default: () => []
			},
			time: {
				typeof: Number,
				default: () => 2000
			},
			min: {
				typeof: Number,
				default: () => 3,
			},
			height: {
				typeof: Number,
				default: () => 520,
			},
			name: {
				typeof: String,
				default: () => 'name',
			},
			time_name: {
				typeof: String,
				default: () => 'time',
			},
		},
		data() {
			return {
				scroll_list: [], //滚动数组
				timer: null, ////滚动时定时器
				scroll_box: {}, //滚动动画样式
				settime: null, //延时获取高度的定时器
				settimes: null, //定时器
				line_height: 0, //滚动的高度
				scroll_item: {}, //每列滚动样式
			}
		},
		methods: {
			//获取高度
			getMenuItemTop() {
				new Promise(resolve => {
					let selectorQuery = uni.createSelectorQuery().in(this);
					selectorQuery.select('.zh-scrollList_scroll_item').boundingClientRect((res) => {
						// 如果节点尚未生成，res值为''，循环调用执行
						if (!res || !res.height) {
							clearTimeout(this.settime)
							this.settime = setTimeout(() => {
								this.getMenuItemTop();
							}, 1000);
						} else {
							this.scroll_item = {
								'overflow': 'hidden',
								'height': `${res.height}px`,
								'line-height': `${res.height}px`
							}
							this.line_height = res.height
							this.scroll()
						}
						resolve(res)
					}).exec()
				})
			},
			//滚动事件
			scroll() {
				//低于3条不滚动
				if (this.scroll_list.length < this.min) {
					return
				}
				clearInterval(this.timer);
				this.timer = setInterval(() => {
					clearTimeout(this.settimes)
					this.scroll_list.push(this.scroll_list[0])
					this.settimes = setTimeout(() => {
						this.scroll_list.shift()
						this.scroll_box = {
							'margin-top': 0,
							'transition': ''
						}
					}, 500)

					this.scroll_box = {
						'margin-top': `-${this.line_height}px`,
						'transition': 'all 0.5s'
					}
				}, this.time)
			},
		},
		computed: {
			scroll_style() {
				return {
					'overflow': 'hidden',
					'height': `${this.height}rpx`,
				}
			},
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		watch: {
			list: {
				handler(news, old) {
					this.scroll_list = JSON.parse(JSON.stringify(news))
					this.$nextTick(() => {
						this.getMenuItemTop()
					})
				},
				deep: true,
				immediate: true,
			},
		},
	}
</script>
<!-- #endif -->

<style lang="scss" scoped>
	.zh-scrollList_scroll_cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80upx;

		.zh-scrollList_title {
			flex: 1;
			color: #333;
			font-size: 24upx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			word-break: break-all;
		}

		.zh-scrollList_time {
			margin-left: 24upx;
			color: #999;
			font-size: 24upx;
		}
	}
</style>